<template>
  <div>
    <!-- 引入头部 -->
    <Header :title="title" :switchHeader='switchHeader'></Header>
    <ul class="content">
      <li v-for="(item,index) in steps" :key="index">
        <p class="quan"></p>
        <div class="container">
          <div class="process">
            <div class="title">
              <span class="top1">{{item.name}}</span>
              <span>{{item.job}}</span>
            </div>
            <hr style="color:#CCCCCC">
            <div class="time">
              <span :class="statusColor(item.statusCode)">{{item.status}}</span>
              <span>{{item.time}}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Header from '../../../components/Header'
export default {
  components: {
    Header
  },
  data () {
    return {
      title: '查询进度',
      switchHeader: true,
      start: 'statusColor1',
      wait: 'statusColor2',
      work: 'statusColor3',
      steps: [
        {
          statusCode: 1,
          name: '平安小王',
          job: '投资经理',
          status: '发起申请',
          time: '2020-01-28 12:11:11'
        },
        {
          statusCode: 2,
          name: '平安小李',
          job: '投资经理',
          status: '处理中',
          time: ''
        },
        {
          statusCode: 3,
          name: '平安小南',
          job: '投资经理',
          status: '待处理',
          time: ''
        },
        {
          statusCode: 3,
          name: '平安小南',
          job: '投资经理',
          status: '待处理',
          time: ''
        }
      ]
    }
  },
  methods: {
    statusColor (status) {
      if(status === 1){
        return this.start
      } else if(status == 2) {
        return this.wait
      }else{
        return this.work
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
div
  ::-webkit-scrollbar{display:none}
  ul
    margin 0 auto
    li
      position relative
      list-style none
      border-left 1px solid #D3B05B
      margin-left 28px
      .quan
        position absolute
        top 50%
        margin-top -8px
        width 16px
        height 16px
        text-align center
        background #fff
        color #fff
        left -8px
        &:before
          content ''
          width 8px
          height 8px
          background #D3B05B
          border-radius 50%
          display block
          margin 4px auto
      .container
         border 1px solid rgba(151, 151, 151, 0)
        .process
          width 309px
          margin-left 28px
          margin-top 10px
          background rgba(255, 255, 255, 1);
          box-shadow 1px 1px 5px 1px rgba(204, 204, 204, 1);
          border-radius: 8px;
          box-sizing border-box;
          .title
            padding-top 9px
            .top1
              font-size 15px
              color #433036
          .time
            margin-top 10px
            padding-bottom 9px
            .statusColor1
              color #4DBE7E
            .statusColor2
              color #EE7736
            .statusColor3
              color #666666
          // .right
          //   width 204px
          //   text-align right
          div
            margin-left 10px
            margin-right 10px
            display flex
            justify-content space-between
            span
              display block
              font-size 14px
              font-family PingFangSC-Regular,PingFang SC
              color rgba(153,153,153,1)
.content li:first-child
  &:before
    content ''
    width 8px
    height 50%
    margin-top -4px
    background #fff
    position absolute
    top 0
    left -4px
  .quan
    width 32px
    height 24px
    left -16px
    &:before
      content '√'
      width 16px
      height 16px
      background #D3B05B
      border-radius 50%
      display block
      margin 4px auto
      text-align center
      line-height 16px
.content li:last-child
  &:after
    content ''
    width 8px
    height 50%
    margin-bottom -4px
    background #fff
    position absolute
    bottom 0
    left -4px
</style>
